<template>
  <div v-loading="loading">
    <div v-show="viewIndex == 0">
      <el-tabs v-model="current" type="card" @tab-click="tabClick">
        <el-tab-pane label="未完成" name="unfinish">
          <OrderTable ref="unfinish" @visitDetail="visitDetail"></OrderTable>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="finish">
          <OrderTable ref="finish" @visitDetail="visitDetail"></OrderTable>
        </el-tab-pane>

        <el-tab-pane label="退款中" name="refunding">
          <OrderTable ref="refunding" @visitDetail="visitDetail"></OrderTable>
        </el-tab-pane>

        <el-tab-pane label="已退款" name="refunded">
          <OrderTable ref="refunded" @visitDetail="visitDetail"></OrderTable>
        </el-tab-pane>

        <el-tab-pane label="异常订单" name="error" v-if="haveError == 1">
          <OrderTable ref="error" @visitDetail="visitDetail"></OrderTable>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div v-show="viewIndex == 1">
      <OrderDetail ref="orderDetail" @back="viewIndex = 0" @backAndReload="viewIndex = 0; initOrder();"></OrderDetail>
    </div>

    <!-- <el-button type="danger" @click="initOrder()">一键debug</el-button> -->
  </div>
</template>

<script>
import OrderTable from "@/components/UserCenter/OrderTable";
import OrderDetail from "@/components/UserCenter/OrderDetail";

export default {
  name: "Info",
  components: {
    OrderTable: OrderTable,
    OrderDetail: OrderDetail,
  },
  data() {
    return {
      loading: true,
      viewIndex: 0,
      haveError: 0,
      current: "unfinish",
    };
  },
  methods: {
    tabClick(tab, event) {
      //   console.log(tab, event);
    },
    initOrder() {
      var url = process.env.URL_HEAD + "/touser/user/page/init/order";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            var order = response.data.order;
            order.reverse();

            if (order != null) {
              var unfinishData = [];
              var finishData = [];
              var refundingData = [];
              var refundedData = [];
              var errorData = [];

              for (var i = 0; i < order.length; i++) {
                // console.log(i + 1 + " " + order[i].orderStatus);
                switch (order[i].orderStatus) {
                  case "未完成":
                    unfinishData.push(order[i]);
                    break;
                  case "已完成":
                    finishData.push(order[i]);
                    break;
                  case "退款中":
                    refundingData.push(order[i]);
                    break;
                  case "已退款":
                    refundedData.push(order[i]);
                    break;
                  default:
                    errorData.push(order[i]);
                    break;
                }
              }

              this.$refs.unfinish.init(unfinishData);
              this.$refs.finish.init(finishData);
              this.$refs.refunding.init(refundingData);
              this.$refs.refunded.init(refundedData);

              if (errorData.length > 0) {
                this.haveError = 1;
                this.$refs.error.init(errorData);
              }

              console.log("initOrder ok");
            } else {
              console.log("no login");
            }
            // console.log(response.data.order);

            this.loading = false;
          },
          (response) => {
            console.log("initOrder error");
            
            this.$message.error("加载失败，请刷新");
            this.loading = false;
          }
        );
    },
    visitDetail(order) {
      // console.log(orderId);

      this.$refs.orderDetail.init(order);

      this.viewIndex = 1;
    },
  },
  created: function () {
    this.initOrder();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-input {
  width: 200px;
}

.tip {
  font-size: 16px;
}

.content {
  font-size: 16px;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
